<template>
    <div class="container">
        <div class="header">
            <div class="left">
                <van-icon name="arrow-left" size=".16rem" color="#fff"/>
            </div>
            <div class="center">订单详情</div>
            <div class="right">
                <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/collect3.png" alt>
                <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/share.png" alt>
            </div>
        </div>

            <van-cell-group>
                <van-cell :title="initData.shopName" :value="initData.shippingState" />

                <van-card
                        :num="initData.quantity"
                        :price="initData.price"
                        :desc="initData.consigneeName"
                        :title="initData.productName"
                        :thumb="initData.productImageUrl"
                />

                <van-cell title="" :value="'共'+initData.quantity+'件商品 合计：￥'+initData.price" />

                <van-cell title="运费" :value="initData.postFee" />

                <van-cell title="实付金额" :value="initData.price" />


                <van-cell title="商家电话" v-if="initData.province===null" :value="initData.shopPhone" />

                <van-cell title="收货地址" v-if="initData.province!=null" :value="initData.province+initData.city+initData.county+initData.detailed" />
                <van-cell title="收货人" v-if="initData.province!=null"  :value="initData.consigneeName" />
                <van-cell title="收货人电话" v-if="initData.province!=null"  :value="initData.consigneePhone" />


            </van-cell-group>




    </div>
</template>

<script>
    export default {
        name: "orderDetail",
        data() {
            return {
                initData: {},

            };
        },
        components: {

        },
        mounted() {

            this.getInitData();
        },
        methods: {


            //初始化页面
            async getInitData() {
                let params = {
                    params:{
                    id: this.$base.getQueryString("id")//$route.query.id
                    }
                };
                const res = await this.$axios.get(this.$api.orderInfo, params);
                if(res.success){

                    switch(res.data.shippingState){
                        case 0:
                            if(res.data.paymentState===2){
                                res.data.shippingState="待支付";
                            }else{
                                res.data.shippingState="已取消";
                            }
                            break;
                        case 3:
                            res.data.shippingState="待发货";
                            break;
                        case 4:
                            res.data.shippingState="已发货";
                            break;
                        case 5:
                            res.data.shippingState="待评价";
                            break;
                        case 6:
                            res.data.shippingState="已完成";
                            break;
                        case 7:
                            res.data.shippingState="售后处理中";
                            break;
                        default:
                            res.data.shippingState="已取消";
                            break;
                    }
                    this.initData=res.data;

                }
            }
        }
    };
</script>

<style scoped>
    .empty{
        width:100%;
        margin-top:.4rem;
        text-align: center;
        font-size:.16rem;
        color:#999999;
    }
    .popContent{
        height:2.5rem;
        display: flex;
        display: -webkit-flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .popContent .date{
        width:80%;
        height:.5rem;
        background:#f2f2f2;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        padding:0 .15rem;
        border-radius: .05rem;
    }
    .popContent .selectNum{
        width:80%;
        height:.5rem;
        background:#f2f2f2;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        padding:0 .15rem;
        border-radius: .05rem;
    }
    .popContent .selectNum .right {
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        align-items: center;
    }
    .popContent .selectNum .right img {
        width:.18rem;
    }
    .popContent .selectNum .right span {
        padding:0 .2rem;
    }
    .popContent .btn {
        width:80%;
        height:.5rem;
        border-radius: .5rem;
        background:#00bf46;
        color:#fff;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }
    .introduce{
        padding:0 .15rem;
        width:100%;
    }
    .introduce .wrap{
        width:100%;
        border-top:1px solid #f2f2f2;
        padding:.1rem 0;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        font-size:.14rem;
        color:#333333;

    }
    .introduce .wrap .right{
        color:#00bf47;
        border-left:1px solid #e6e6e6;
        padding-left:.2rem;
    }
    .container{
        padding-top:.44rem;
    }
    .banner{
        width:100%;
    }
    .banner img {
        width:100%;
    }
    .video {
        width: 100%;
        /* height: 2.25rem; */
        position: relative;
    }
    .video .pic {
        position: absolute;
        width: 0.45rem;
        height: 0.45rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    .video .pic img {
        width: 100%;
        height: 100%;
    }
    .header {
        position: fixed;
        width: 100%;
        height: 0.44rem;
        left: 0;
        top: 0;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.15rem;
        z-index: 100;
    }
    .header .left{
        width:30%;
    }
    .header .right{
        width:30%;
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        align-items: center;
    }
    .header .right img {
        width: 0.18rem;
        margin-left: 0.16rem;
    }
    .header .center{
        width:40%;
        color:#fff;
        text-align: center;
    }
    .detail {
        width: 100%;
        padding: 0.15rem 0 0;
        background: #fff;
    }
    .detail .title {
        padding: 0 0.15rem;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
    }
    .detail .action {
        width: 100%;
        height: 0.4rem;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eeeeee;
        padding: 0 0.15rem;
    }
    .detail .action .left {
        font-size: 0.14rem;
        color: #f44736;
    }
    .detail .action .right {
        height: 100%;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        font-size: 0.14rem;
        color: #808080;
    }
    .detail .action .right span {
        padding-right: 0.12rem;
    }
    .detail .title .name {
        font-size: 0.16rem;
        color: #010101;
    }
    .detail .title .num {
        font-size: 0.15rem;
        color: #333333;
        min-width:1.3rem;
    }
    .detail .title .num span {
        color: #f44736;
    }
    .detail .subtitle {
        font-size: 0.14rem;
        color: #808080;
        margin-top: 0.12rem;
        padding: 0 0.15rem;
    }
    .detail .adress {
        padding: 0 0.15rem;
        font-size: 0.12rem;
        color: #01bf47;
        margin-top: 0.1rem;
        padding-bottom: 0.16rem;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .detail .adress .right {
        width:.6rem;
        height:.25rem;
        border:1px solid #01bf47;
        border-radius: 3px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }
    .detail .adress .right a{
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        color:#01bf47;
    }
    .detail .adress img {
        width: 0.12rem;
    }
    .detail .adress span {
        padding-left: 0.06rem;
    }
    /* .list {
      padding: 0 0.15rem 0.2rem;
    } */
    .list li {
        background: #fff;
        padding: .15rem 0.15rem;
        margin-top: 0.08rem;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
    }
    .list li .left{
        width:1.05rem;
    }
    .list li .left img {
        width:100%;
    }
    .list li .center{
        padding-left:.12rem;
    }
    .list li .center .title {
        font-size:.15rem;
        color:#333333;
    }
    .list li .center .subtitle {
        font-size:.12rem;
        color:#8c8c8c;
        width:1.36rem;
        margin-top:.06rem;
    }
    .list li .center .price{
        margin-top:.2rem;
        font-size:.15rem;
        color:#f44736;
    }
    .list li .right {
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-direction: column;
        height:100%;
        min-height:.88rem;
    }
    .list li .right .addShoppingCar{
        width:.42rem;
        height:.42rem;
        border-radius: 50%;
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4);
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size:.12rem;
        color:#00bf47;
    }
    .list li .right .addShoppingCar img {
        width:.18rem;
    }
    .list li .right .buy{
        width:.7rem;
        height:.3rem;
        background:#00bf47;
        color:#fff;
        border-radius: .05rem;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        line-height:.3rem;
    }
</style>



<style>
    .van-tab--active {
        color: #01bf47;
    }
    .van-search .van-cell {
        border-radius: 50px;
        background: #e8e8e8;
    }
</style>
